<template>
    <div id="profile">
        <h3 class="p-title">基本资料</h3>
        <form class="p-wrap">
            <div class="p-left">
                <div class="pw-item">
                    <span>昵称</span>
                    <input v-model="userInfo.nickname" type="text">
                </div>
                <div class="pw-item">
                    <span>性别</span>
                    <div class="pw-box">
                        <input type="radio" value="0" v-model="userInfo.sex" id="male" name="sex">
                        <span></span>
                    </div>
                    <label for="male">男</label>
                    <div class="pw-box">
                        <input type="radio" value="1" v-model="userInfo.sex" id="female" name="sex">
                        <span></span>
                    </div>
                    <label for="female">女</label>
                </div>
                <div class="pw-item">
                    <span>生日</span>
                    <div class="data-select" v-if="isShowSelect">
                        <date-select :yearP="birtydayInfo.year" :monthP="birtydayInfo.month" :dayP="birtydayInfo.day" ></date-select>
                    </div>
                </div>
                <div class="pw-item">
                    <span>地址</span>
                    <el-cascader
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                    @change="handleChange">
                  </el-cascader>
                </div>
                <div class="pw-item">
                    <span>口味</span>
                    <el-select v-model="value1"
                    @change="handleChangeTaste" placeholder="请选择">
                        <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
<!--                <div class="pw-item">-->
<!--                    <span>自我介绍</span>-->
<!--                    <textarea name="" id="" cols="30" rows="10" placeholder="介绍下自己，填写你认为自己称得上美食达人的理由。-->
<!--比如：-->
<!--你是否烧得一手好菜-->
<!--你是否喜欢记录美食日记，与大家分享？-->
<!--你是否在厨艺、美食、营养健康等领域有一定专业知识？-->
<!--或者美食领域有任何的出色之举，你都可以写进来，越详细越好呦！"></textarea>-->
<!--                </div>-->
                <div class="pw-item">
                    <span></span>
                    <span class="pw-sub" @click="changeInfo()">保存</span>
                </div>
            </div>
            <div class="p-right">
                <img :src="userInfo.headImg" alt="">
                <div>
                    <span>更换头像</span>
                    <input type="file" @change="changeImg()" ref="img">
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import DateSelect from '@/components/font/home/userInfo/DateSelect.vue'
import { regionData } from 'element-china-area-data'
import provinceAndCity from '@/components/font/home/tool/province.json'
import cookie from '../../../../cookien'
export default {
  components: { DateSelect },
  name: 'profile',
  data () {
    return {
      isShowSelect: true,
      birtydayInfo: {},
      userInfo: {},
      options: regionData,
      selectedOptions: ['140000', '140400', '140404'],
      provinceAndCity,
      search: {},
      options1: [{
        value: '0',
        label: '请选择'
      }, {
        value: '1',
        label: '酸'
      }, {
        value: '2',
        label: '麻辣'
      }, {
        value: '3',
        label: '变态辣'
      }, {
        value: '4',
        label: '甜'
      }, {
        value: '5',
        label: '其他'
      }
      ],
      value1: '0'
    }
  },
  methods: {
    handleChangeTaste (value) {
      // console.log(value)
      // console.log(this.options1[2])
    },
    handleChange (value) {
      // console.log(value)
      this.search.province = ''
      this.search.city = ''
      this.search.district = ''
      for (var k = 0, lengthk = provinceAndCity.length; k < lengthk; k++) {
        // 确定省
        if (provinceAndCity[k].code === value[0]) {
          this.search.province = provinceAndCity[k].name
          if (provinceAndCity[k].cityList && value.length >= 2 && value[1] !== '') {
            for (var i = 0, lengthi = provinceAndCity[k].cityList.length; i < lengthi; i++) {
              // 确定市
              if (provinceAndCity[k].cityList[i].code === value[1] || provinceAndCity[k].cityList.length === 1) {
                this.search.city = provinceAndCity[k].cityList[i].name
                // 确定区
                if (provinceAndCity[k].cityList[i].areaList && value.length === 3 && value[2] !== '') {
                  for (var j = 0, lengthj = provinceAndCity[k].cityList[i].areaList.length; j < lengthj; j++) {
                    if (provinceAndCity[k].cityList[i].areaList[j].code === value[2]) {
                      this.search.district = provinceAndCity[k].cityList[i].areaList[j].name
                      break
                    }
                  }
                }
                break
              }
            }
          }
          break
        }
      }
      // console.log(this.search.province + ',' + this.search.city + ',' + this.search.district)
      this.userInfo.address = this.search.province + '-' + this.search.city + '-' + this.search.district + '-' + value[0] + '-' + value[1] + '-' + value[2]
    },
    getData () {
      this.$axios({
        method: 'get',
        url: '/Menu/User/getUserInfo',
        headers: {
          token: cookie.getToken()
        }
      }).then(data => {
        // console.log(data.data)
        if (data.data.code === 200) {
          this.userInfo = data.data.object
          this.value1 = data.data.object.like
          const strB = data.data.object.birthday.split('-')
          this.birtydayInfo.year = strB[0]
          if (strB[2] < 10) {
            strB[2] = ~~strB[2]
          }
          if (strB[1] < 10) {
            strB[1] = ~~strB[1]
          }
          this.birtydayInfo.month = strB[1]
          this.birtydayInfo.day = strB[2]
          const strA = data.data.object.address.split('-')
          strA.splice(0, 3)
          this.selectedOptions = strA
          this.handleChange(this.selectedOptions)
          // console.log(this.birtydayInfo)
          this.dateChange(this.birtydayInfo)
          this.isShowSelect = false
          this.$nextTick(() => {
            // 在 DOM 中添加 my-component 组件
            this.isShowSelect = true
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    changeImg () {
      var that = this
      var f = new FileReader()
      f.readAsDataURL(this.$refs.img.files[0])
      const file = this.$refs.img.files[0]
      const param = new FormData()
      param.append('multipartFile ', file)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          token: cookie.getToken()
        }
      }
      this.$axios.put('Menu/User/modifyHeadImg', param, config)
        .then(res => {
          console.log(res.data)
          if (res.data.code === 200) {
            that.userInfo.headImg = f.result
            this.$message({
              message: '头像修改成功',
              type: 'success'
            })
            this.$router.go(0)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    dateChange (obj) {
      // console.log(obj.year + '-' + obj.month + '-' + obj.day)
      this.userInfo.birthday = obj.year + '-' + obj.month + '-' + obj.day
    },
    changeInfo () {
      if (this.userInfo.nickname === undefined || this.userInfo.nickname === '') {
        this.$message('请输入昵称')
      } else {
        this.$axios({
          method: 'PUT',
          url: '/Menu/User/modifyUser',
          headers: {
            token: cookie.getToken()
          },
          params: {
            address: this.userInfo.address,
            birthday: this.userInfo.birthday,
            like: this.value1,
            nickname: this.userInfo.nickname,
            sex: this.userInfo.sex
          }
        }).then(data => {
          if (data.data.code === 200) {
            // console.log(data.data)
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  },
  mounted () {
    this.getData()
  },
  updated () {
    // this.getData()
  }
}
</script>

<style lang="less" scoped>
#profile{
    width: 1000px;
    margin: 60px auto;
    height:auto;
    .p-title{
        display:inline-block;
        width: auto;
        border-bottom: 2px solid #383830;
        font-weight: bold;
        font-size: 14px;
        color: #383830;
        margin-bottom:25px;margin-top:20px;
        padding-bottom: 10px;
        &:hover{
            color: #FFB31A;
            cursor: pointer;
        }
    }
    .p-wrap{
        width: 100%;
        overflow: hidden;
        height: auto;
        .p-left{
            float: left;
            width: 690px;
            .pw-item{
                height: auto;
                line-height: 38px;
                margin-top: 20px;
                span{
                    width: 80px;
                    height: 20px;
                    display: inline-block;
                    text-align: right;
                    vertical-align: top;
                    margin-right: 12px;
                    font-size: 15px;
                }
                input[type=text]{
                    display: inline-block;
                    width: 433px;
                    height: 38px;
                    padding-left: 13px;
                    border: 1px solid #E5E3DF;
                    border-radius: 4px;
                    font-size: 15px;
                }
                input[type="radio"]{
                    margin:0 6px 0 12px;
                }
                textarea{
                    display: inline-block;
                    width: 581px;
                    height: 269px;
                    padding: 0 0 0 13px;
                    border: 1px solid #E5E3DF;
                    border-radius: 4px;
                    font-size: 15px;
                    line-height: 27px;
                    resize: none;
                }
                .pw-sub{
                    display: inline-block;
                    width: 168px;
                    height: 42px;
                    margin-left: 94px;
                    margin-bottom: 80px;
                    border-radius: 4px;
                    background: #FFB31A;
                    font-size: 15px;
                    line-height: 42px;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                }
                .pw-box{
                    display: inline-block;
                    width: 15px; height: 15px;
                    // margin: 0 5px 0 0;
                    position: relative;
                    background-color: #fff;
                    vertical-align:middle;
                    border-radius: 100%;
                    border: 1px solid #E5E3DF;
                    input{
                        opacity: 0;
                        margin: 0;
                        position: absolute;top: 0;left: 0;
                        width: 100%;height: 100%;
                        z-index: 100;
                        background-color: red;
                    }
                    span{
                        display:block;width: 8px;height:8px;
                        border-radius:100%;
                        background-color: #FFB31A;
                        position: absolute;
                        top: 50%;left: 50%;
                        margin: -4px 0 0 -4px;
                        z-index: 1;
                    }
                    input+span{
                        opacity: 0;
                    }
                    input:checked+span{
                        opacity: 1;
                    }
                }
                label{
                    padding:3px 10px 0 5px ;
                    display: inline-block;
                }
                .data-select{display: inline-block;}
            }
        }
        .p-right{
            float: right;
            width: 280px;
            img{
                width: 120px; height: 120px;
                border-radius: 60px;
                display: block;
                object-fit: cover;
            }
            div{
                display: inline-block;
                width: 120px;
                height: 34px;
                margin-top: 14px;
                border-radius: 4px;
                border: 1px solid #FFB31A;
                font-size: 15px;
                text-align: center;
                line-height: 33px;
                color: #FFB31A;
                position: relative;
                &:hover{
                    cursor: pointer !important;
                }
                input{
                    width: 100%;
                    height:100%;
                    opacity: 0;
                    position: absolute;
                    top: 0;left: 0;
                    &:hover{
                      cursor: pointer !important;
                    }
                }
                span{
                   &:hover{
                      cursor: pointer !important;
                    }
                }
            }
        }
    }
}
</style>
